<template>
  <view class="wrap">
    <!-- #ifdef WEB -->
    <uv-navbar :title="title" placeholder leftIcon=''></uv-navbar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar :title="title" autoBack safeAreaInsetTop placeholder :border='false'>
      <template v-slot:right>
        <view class="navEditName nav-right" v-if="type == 2 && detail.is_my && detail.run_status != 4" @click="tap">变更内容</view>
      </template>
    </uv-navbar>
    <template v-if="detail.is_my && detail.status != 0">
      <view class="status" v-if="detail.examine_status == 2">审核不通过，{{ detail.reason }}</view>
      <view class="status" v-if="detail.examine_status == 0">审核中</view>
    </template>
    <!-- #endif -->
    <view class="bigTitle">活动信息</view>
    <view class="list">
      <view class="item">
        <view class="left">{{ type == 1 ? '上市公司' : '会议名称' }}</view>
        <view class="right">{{ detail.target_name }}</view>
      </view>
      <!-- 上市公司调研 -->
      <template v-if="type == 1">
        <view class="item">
          <view class="left">参与人数</view>
          <view class="right">{{ detail.sign_count }} / {{ typeObj[detail.number] }}</view>
        </view>
        <view class="item">
          <view class="left">调研时间</view>
          <view class="right">{{ timeFormat(detail.start_time_text, 'yyyy-mm-dd hh:MM') }}</view>
        </view>
        <view class="item">
          <view class="left">截止时间</view>
          <view class="right">{{ timeFormat(detail.end_time_text, 'yyyy-mm-dd hh:MM') }}</view>
        </view>
        <view class="item">
          <view class="left">调研地点</view>
          <view class="right">{{ detail.province }} {{ detail.city }}</view>
        </view>
        <view class="item">
          <view class="left">详细地址</view>
          <view class="right">{{ detail.address }}</view>
        </view>
      </template>
      <!-- 策略会&线下活动 -->
      <template v-else>
        <view class="item">
          <view class="left">时间</view>
          <view class="right">{{ timeFormat(detail.start_time_text) }}</view>
        </view>
        <view class="item">
          <view class="left">地点</view>
          <view class="right">{{ detail.province }} {{ detail.city }}</view>
        </view>
        <view class="item">
          <view class="left">详细地址</view>
          <view class="right">{{ detail.address }}</view>
        </view>
        <view class="item">
          <view class="left">参会人数</view>
          <view class="right">{{ detail.sign_count }} / {{ typeObj[detail.number] }}</view>
        </view>
      </template>
      <view class="item">
        <view class="left">报名费用</view>
        <view class="right">{{ detail.coin }}投研币</view>
      </view>
      <view class="item">
        <view class="left">{{ type == 1 ? "接待人员" : '组织机构' }}</view>
        <view class="right">{{ detail.receiver }}</view>
      </view>
      <view class="item">
        <view class="left">{{ type == 1 ? '调研' : '' }}联系人</view>
        <view class="right">{{ detail.contacts }}</view>
      </view>
    </view>
    <view class="lecture" v-if="detail.guest && detail.guest.length">
      <view class="bigTitle">参会嘉宾</view>
      <view class="user">
        <view class="item" v-for="(item, index) in detail.guest" :key="index">
          <avatar :src='setUrl(item.avatar)' styles='width: 120rpx;height: 120rpx'></avatar>
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="desc">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="lecture" v-if="detail.desc || detail.images">
      <view class="bigTitle">活动背景</view>
      <view class="content">{{ detail.desc }}</view>
      <view class="pic" v-if="detail.images">
        <image :src="setUrl(item)" mode="widthFix" style="display: block;" class="img" v-for="(item, index) in detail.images.split(',')"></image>
      </view>
    </view>
    <!-- #ifdef WEB -->
    <view class="footer">
      <button class="btn" hover-class="none" @click="goSign">去APP查看</button>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <template v-if="detail.status == 1">
      <view class="footer" v-if="detail.is_my == 1 || (detail.is_my == 0 && (detail.run_status == 2 || detail.run_status == 3))">
        <view class="pox">
          <view class="left">
            <view class="item" v-if="detail.is_my == 1 && (detail.run_status == 2 || detail.run_status == 3 || detail.run_status == 4)" @click="goCode">
              <view class="icon">
                <image src="../../static/code.png" class="img"></image>
              </view>
              <view class="test">签到二维码</view>
            </view>
            <view class="item" v-if="detail.is_my == 1" @click="goSignList">
              <view class="icon">
                <image src="../../static/sign.png" class="img"></image>
              </view>
              <view class="test">报名列表</view>
            </view>
            <view class="item" v-if="detail.is_my == 0 && (detail.run_status == 2 || detail.run_status == 3)" @click="goFeedBack">
              <view class="icon">
                <image src="../../static/plaint.png" class="img"></image>
              </view>
              <view class="test">投诉组织者</view>
            </view>
            <view class="item" v-if="detail.is_my == 0 && (detail.run_status == 2 || detail.run_status == 3)" @click="goQrCode">
              <view class="icon">
                <image src="../../static/scan.png" class="img"></image>
              </view>
              <view class="test">扫码签到</view>
            </view>
            <view class="item" @click="nowShare([1,2,3,4,6])" v-if="detail.run_status == 2 || detail.run_status == 3">
              <view class="icon">
                <image src="../../static/share2.png" class="img"></image>
              </view>
              <view class="test">转发给好友</view>
            </view>
          </view>
          <view class="right" v-if="detail.is_my == 1 && detail.run_status != 4">
            <button class="btn" hover-class="none" @click="cancelSurvey(1)">取消调研</button>
            <button class="btn" hover-class="none" v-if="detail.run_status == 3" @click="cancelSurvey(2)">结束调研</button>
          </view>
          <view class="right" v-if="detail.is_my == 0 && (detail.run_status == 2 || detail.run_status == 3)">
            <template v-if="detail.enroll_info == null && detail.is_enroll == 0">
              <button class="btn" hover-class="none" @click="goSign">报名</button>
            </template>
            <template v-if='detail.enroll_info && detail.is_enroll == 1 && detail.enroll_info.is_invite == 0'>
              <button class="btn" hover-class="none" @click="cancelSign">取消报名</button>
            </template>
            <template v-if="detail.enroll_info && detail.enroll_info.is_invite == 1 && detail.enroll_info.confirm_status == 0">
              <button class="btn" hover-class="none" @click="join(1)">同意参会</button>
              <button class="btn" hover-class="none" @click="join(2)">婉拒参会</button>
            </template>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </template>
    <template v-else>
      <view class="footer">
        <button class="btn" hover-class="none">已取消</button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </template>
    <!-- #endif -->
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-modal ref="modal" title="提示" showCancelButton isClose zIndex='99' :closeOnClickOverlay='false' confirmColor='#E43222' @cancel='cancelModalSurvey' @confirm="confirmSurvey">
      <view class="slot-content">
        <view class="modalContent">{{ msg }}</view>
        <view class="modalTest" v-if="popupType == 1">
          <uv-textarea v-model="reason" height='120rpx' maxlength='100' placeholder="请输入内容，100字内"></uv-textarea>
        </view>
      </view>
    </uv-modal>
    
    <uv-modal ref="qrCodeModal" title="提示" showCancelButton isClose zIndex='99' :closeOnClickOverlay='false' confirmColor='#E43222' @confirm="confirmQrCode">
      <view class="slot-content">
        <view class="modalContent">您未报名，请联系现场工作人员处理</view>
      </view>
    </uv-modal>
    
    <share ref="onShare" :show='shareShow' @click="getShare"></share>
  </view>
</template>

<script setup>
import logoImage from '@/static/logo.png';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { post } from '@/api';
import { setUrl, toast, checkServe } from '@/common';
import { useOrder } from '@/store';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const order = useOrder();
const modal = ref(null);
const qrCodeModal = ref(null);
const onShare = ref(null);
const typeObj = ref({
  1: '不限',
  2: 5,
  3: 10,
  4: 15,
  5: 20
})
let id = '';
let isAuth = '';
let type = ref('');
let title = ref('');
let detail = ref({});
let reason = ref('');
let msg = ref('');
let popupType = ref('');
let shareShow = ref([]);

onLoad((option) => {
  id = option.id;
  type.value = option.type;
})
onShow(() => {
  setTimeout(() => {
    getData();
    // #ifdef APP-PLUS
    getAuth();
    // #endif
  }, 300)
})

function getData(){
  post('api/survey/getSurveyDetail', { survey_id: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      type.value = data.type;
      detail.value = data;
      title.value = data.type == 1 ? "上市公司调研详情" : '策略会&线下活动详情';
    }
  })
}
// 查询是否有身份认证
function getAuth(){
  post('api/user/getIdentityAuthInfo').then(res => {
    if(res.code == 1){
      isAuth = res.data;
    }
  })
}
// 取消报名
function cancelSign(){
  const params = {
    survey_id: id
  }
  post('api/survey/cancelSurveyEnroll', params).then(res => {
    if(res.code == 1){
      toast('取消成功');
      getData();
    }
  })
}
// 同意婉拒参会
function join(value){
  if(restful()){
    const params = {
      survey_id: id,
      confirm_status: value
    }
    post('api/survey/confirmParticipant', params).then(res => {
      if(res.code == 1){
        toast('操作成功');
        getData();
      }
    })
  }
}
// 取消调研
function setSurvey(){
  const params = {
    survey_id: id,
    reason: reason.value
  }
  post('api/survey/cancelSurvey', params).then(res => {
    if(res.code == 1){
      toast('取消成功');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
// 结束调研
function closeSurvey(){
  const params = {
    survey_id: id
  }
  post('api/survey/endSurvey', params).then(res => {
    if(res.code == 1){
      toast('操作成功');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
// 确认按钮
function confirmSurvey(){
  if(popupType.value == 1){ // 取消调研
    if(!reason.value) return toast('请输入备注');
    setSurvey();
  }
  if(popupType.value == 2){ // 结束调研
    closeSurvey();
  }
  modal.value.close();
}
// 弹窗
function cancelSurvey(value){
  popupType.value = value;
  if(value == 1){ // 取消调研
    msg.value = '取消调研后，所有已经报名或付费的用户，将会通知取消并退回报名费。';
  }
  if(value == 2){ // 结束调研
    msg.value = '结束后调研，状态不可恢复。请问确认结束吗？';
  }
  modal.value.open();
}
// 取消按钮
function cancelModalSurvey(){
  modal.value.close();
  reason.value = '';
}
function confirmQrCode(){
  qrCodeModal.value.close();
}
function goQrCode(){
  let dValue = detail.value;
  if(dValue.enroll_info == null) return qrCodeModal.value.open();
  if(dValue.enroll_info && dValue.enroll_info.is_invite == 1 && dValue.enroll_info.confirm_status == 0) return qrCodeModal.value.open();
  uni.scanCode({
  	// onlyFromCamera: true,
  	success: function (res) {
      let url = res.result;
      if(url.includes('/pages/invest/code') && url.includes(id)){
        uni.navigateTo({
          url: url
        });
      }else{
        toast('请扫描正确的二维码')
      }
  	}
  });
}
// 分享
function getShare(row){
  if(row.id == 5) toast('开发中...');
  
  let title = `${detail.value.target_name}`;
  let summary = detail.value.desc;
  let href = `${uni.$uv.http.config.webUrl}/pages/invest/detail?id=${id}`;
  let imageUrl = logoImage;
  
  if(row.id == 6) {
    uni.setClipboardData({
    	data: href,
    	success: function () {
    		toast('复制成功');
    	}
    });
    onShare.value.close();
    return;
  }
  function goShare(){
    let scene = {
      1: 'WXSceneSession',
      2: 'WXSceneTimeline'
    }
    uni.share({
      provider: row.share,
      scene: scene[row.id],
      type: 0,
      href,
      title,
      summary,
      imageUrl,
      success(res) {
        console.log(JSON.stringify(res));
        console.log('分享成功');
      },
      fail(err) {
        console.log(JSON.stringify(err));
        console.log('分享失败');
      },
      complete() {
        console.log('初始化');
        rowShare = '';
      }
    })
  }
  onShare.value.close();
  checkServe('share', row.share, goShare);
}
function nowShare(row){
  shareShow.value = row;
  onShare.value.open();
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/group/not-detail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
function tap(){
  order.setInvest(detail.value);
  uni.navigateTo({
    url: '/pages/invest/meeting2?edit=1'
  });
}
function goSign(){
  if(restful()){
    uni.navigateTo({
      url: `/pages/invest/sign?id=${id}`
    });
  }
}
function restful(){
  if(isAuth){
    if(isAuth.examine_status != 1){
      uni.navigateTo({
        url: '/pages/invest/cert'
      });
    }else{
      return true;
    }
  }else{
    uni.navigateTo({
      url: '/pages/invest/cert'
    });
  }
  return false;
}
function goCode(){
  uni.navigateTo({
    url: `/pages/invest/signCode?id=${id}`
  });
}
function goFeedBack(){
  uni.navigateTo({
    url: '/pages/invest/feedback'
  });
}
function goSignList(){
  uni.navigateTo({
    url: `/pages/invest/signList?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .slot-content{
    .modalTest{
      margin-top: 20rpx;
    }
    .modalContent{
      font-size: 26rpx;
    }
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .item{
          margin-right: 24rpx;
          &:last-child{
            margin-right: 0;
          }
          .icon{
            width: 44rpx;
            height: 44rpx;
            font-size: 0;
            margin: 0 auto;
          }
          .test{
            font-weight: 400;
            font-size: 20rpx;
            color: #949494;
            padding-top: 4rpx;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        width: 0;
        .btn{
          flex: 1;
          width: 100%;
          margin-left: 10rpx;
          max-width: 420rpx;
        }
      }
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #F5F5F5;
  }
  .status{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #FFEDEB;
    font-weight: 400;
    font-size: 28rpx;
    color: #E43222;
    text-align: center;
  }
  .lecture{
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    .pic{
      width: 100%;
      padding: 0 30rpx;
    }
    .content{
      padding: 30rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #737373;
    }
    .user{
      padding: 0 30rpx;
      padding-top: 20rpx;
      .item{
        width: 100%;
        padding: 20rpx 0;
        display: flex;
        align-items: flex-start;
        .info{
          padding-left: 20rpx;
          flex: 1;
          width: 0;
          .desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }
          .name{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
            padding-bottom: 8rpx;
          }
        }
      }
    }
  }
  .list{
    background-color: #fff;
    padding: 0 30rpx;
    .item{
      height: 120rpx;
      line-height: 120rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #E6E6E6;
      &:last-child{
        border-bottom: 0;
      }
      .right{
        font-weight: 500;
        font-size: 32rpx;
        color: #2B2B2B;
      }
      .left{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-right: 30rpx;
      }
    }
  }
  .bigTitle{
    font-weight: 500;
    font-size: 36rpx;
    color: #2B2B2B;
    height: 120rpx;
    line-height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #E6E6E6;
    background-color: #fff;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>